import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { Table } from 'antd';
import { tableLocale } from '@/tool/components/PageEmpty';
import { CaretRightOutlined, CaretDownOutlined } from '#/utils/antdIcons.js';
import { formatName } from '../../constant';

import styles from './index.less';

export const RollingTable = (props) => {
  // const [expandedRowKeys, setExpandedRowKeys] = useState([]); // 表格当前展开的行
  // useEffect(() => {
  //   const expand = Object.keys(props.sequenceProportionTableData);
  //   setExpandedRowKeys(expand)
  // }, [props.sequenceProportionTableData])
  // // 自定义展开
  // const onHandelExpand = (expanded, record) => {
  //   //expanded是否展开  record每一项的值
  //   if (expanded) {
  //     const arr = expandedRowKeys;
  //     arr.push(record.key);
  //     setExpandedRowKeys(arr);
  //   } else {
  //     let arr2 = [];
  //     if (expandedRowKeys.length > 0 && record.key) {
  //       arr2 = expandedRowKeys.filter((key) => {
  //         return key !== record.key;
  //       });
  //     }
  //     setExpandedRowKeys(arr2);
  //   }
  // };
  const sequenceColumns = [
    {
      dataIndex: 'timeOrder',
      title: '时点',
      key: 'timeOrder',
      width: 100,
      align: 'center',
    },
    {
      dataIndex: 'sum',
      title: '汇总',
      key: 'sum',
      width: 100,
      align: 'center',
      children: [
        {
          dataIndex: 'sumRecoveryReferencePrice',
          title: '回收参考价',
          key: 'sumRecoveryReferencePrice',
          width: 100,
          align: 'center',
          render: (item) => {
            return <div style={{ color: '#67DCAB' }}>{item}</div>;
          },
        },
        {
          dataIndex: 'sumTotalQuantity',
          title: '总成交电量',
          key: 'sumTotalQuantity',
          width: 100,
          align: 'center',
          render: (item) => {
            return <div style={{ color: '#67DCAB' }}>{item}</div>;
          },
        },
        {
          dataIndex: 'sumTotalElectricity',
          title: '总成交电费',
          key: 'sumTotalElectricity',
          width: 100,
          align: 'center',
          render: (item) => {
            return <div style={{ color: '#67DCAB' }}>{item}</div>;
          },
        },
        {
          dataIndex: 'sumElectricityPrice',
          title: '加权均价',
          key: 'sumElectricityPrice',
          width: 100,
          align: 'center',
          render: (item) => {
            return <div style={{ color: '#67DCAB' }}>{item}</div>;
          },
        },
      ],
    },
    {
      dataIndex: 'monthLong',
      title: '月中长期',
      key: 'monthLong',
      width: 100,
      align: 'center',
      children: [
        {
          dataIndex: 'monthTotalQuantity',
          title: '总成交电量',
          key: 'monthTotalQuantity',
          width: 100,
          align: 'center',
        },
        {
          dataIndex: 'monthTotalElectricity',
          title: '总成交电费',
          key: 'monthTotalElectricity',
          width: 100,
          align: 'center',
        },
        {
          dataIndex: 'monthElectricityPrice',
          title: '加权均价',
          key: 'monthElectricityPrice',
          width: 100,
          align: 'center',
        },
      ],
    },
    {
      dataIndex: 'periodLong',
      title: '旬中长期',
      key: 'periodLong',
      width: 100,
      align: 'center',
      children: [
        {
          dataIndex: 'periodTotalQuantity',
          title: '总成交电量',
          key: 'periodTotalQuantity',
          width: 100,
          align: 'center',
        },
        {
          dataIndex: 'periodTotalElectricity',
          title: '总成交电费',
          key: 'periodTotalElectricity',
          width: 100,
          align: 'center',
        },
        {
          dataIndex: 'periodElectricityPrice',
          title: '加权均价',
          key: 'periodElectricityPrice',
          width: 100,
          align: 'center',
        },
      ],
    },
    {
      dataIndex: 'dayLong',
      title: '日中长期',
      key: 'dayLong',
      width: 100,
      align: 'center',
      children: [
        {
          dataIndex: 'dayTotalQuantity',
          title: '总成交电量',
          key: 'dayTotalQuantity',
          width: 100,
          align: 'center',
        },
        {
          dataIndex: 'dayTotalElectricity',
          title: '总成交电费',
          key: 'dayTotalElectricity',
          width: 100,
          align: 'center',
        },
        {
          dataIndex: 'dayElectricityPrice',
          title: '加权均价',
          key: 'dayElectricityPrice',
          width: 100,
          align: 'center',
        },
      ],
    },
  ];
  /**处理表格数据 */
  const getDataSource = (data) => {
    const dataSource = [];
    Object.values(data).map((item, index) => {
      const obj = {
        point: formatName(Object.keys(data)[index]),
        key: Object.keys(data)[index],
        children: [],
      };
      item.map((t) => {
        const tObj = { point: t.timeOrder, key: t.formId, children: [] };
        obj.children.push({ ...t, ...tObj });
      });
      dataSource.push(obj);
    });
    return dataSource;
  };

  return (
    <Table
      className={styles.SequenceTable}
      columns={sequenceColumns}
      dataSource={props.sequenceProportionTableData}
      // dataSource={getDataSource(props.sequenceProportionTableData)}
      bordered
      locale={tableLocale}
      rowKey={'timeOrder'}
      pagination={false}
      // expandable={{
      //   expandedRowKeys: expandedRowKeys,
      //   expandIcon: ({ expanded, onExpand, record }) => {
      //     if (record?.children?.length) {
      //       return expanded ? (
      //         <CaretDownOutlined
      //           style={{ width: 8, height: 5, marginRight: 8, marginBottom: 6 }}
      //           onClick={(e) => onExpand(record, e)}
      //         />
      //       ) : (
      //         <CaretRightOutlined
      //           style={{ width: 8, height: 5, marginRight: 8, marginBottom: 6 }}
      //           onClick={(e) => onExpand(record, e)}
      //         />
      //       );
      //     }
      //     return null;
      //   },
      // }}
      // onExpand={onHandelExpand}
    />
  );
};

const mapStateToProps = ({ mediumAndLongTermMarket }) => ({
  sequenceProportionTableData: mediumAndLongTermMarket.sequenceProportionTableData,
});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(RollingTable);
